Step 3 of 4: Format the Axes

In this step, you will add a ChartView object so you can customize the X-Axis. You can use either XAML markup or code to achieve this. Select the appropriate tab below and complete the steps:

In XAML
In Code

Add the ChartView object so you can set titles for the X-Axis and Y-axis

The ChartView object represents the area of the chart that contains data (including the axes). For more information on the chart axes, see Axes. The axis titles are UIElement objects rather than simple text. In this example we will use TextBlock elements to assign the text to the X-Axis and Y-Axis titles. Once we add the TextBlock element we can then format the text by changing its foreground color and aligning it to the center.
XAML
Copy Code
<c1chart:C1Chart >
      <c1chart:C1Chart.View>
        <c1chart:ChartView>
          <c1chart:ChartView.AxisX>
            <c1chart:Axis>
              <c1chart:Axis.Title>
                <TextBlock Text="Price" TextAlignment="Center" Foreground="Crimson"/>
              </c1chart:Axis.Title>
            </c1chart:Axis>
          </c1chart:ChartView.AxisX>
          <c1chart:ChartView.AxisY>
            <c1chart:Axis>
              <c1chart:Axis.Title>
                <TextBlock Text="Kitchen Electronics" TextAlignment="Center" Foreground="Crimson"/>
              </c1chart:Axis.Title>
            </c1chart:Axis>
          </c1chart:ChartView.AxisY>
        </c1chart:ChartView>
      </c1chart:C1Chart.View>
    </c1chart:C1Chart>

XAML	Copy Code
<c1chart:C1Chart > <c1chart:C1Chart.View> <c1chart:ChartView> <c1chart:ChartView.AxisX> <c1chart:Axis> <c1chart:Axis.Title> <TextBlock Text="Price" TextAlignment="Center" Foreground="Crimson"/> </c1chart:Axis.Title> </c1chart:Axis> </c1chart:ChartView.AxisX> <c1chart:ChartView.AxisY> <c1chart:Axis> <c1chart:Axis.Title> <TextBlock Text="Kitchen Electronics" TextAlignment="Center" Foreground="Crimson"/> </c1chart:Axis.Title> </c1chart:Axis> </c1chart:ChartView.AxisY> </c1chart:ChartView> </c1chart:C1Chart.View> </c1chart:C1Chart>

Configure the value of the X-Axis to start at zero and change the default AxisX.MajorUnit unit value from 50 to 20. Also set the AutoMin property to False so we can have the value begin at zero instead of the minimum data value. Your XAML code for the View object should now appear like the following:

XAML	Copy Code
<c1chart:C1Chart.View> <c1chart:ChartView> <c1chart:ChartView.AxisX> <c1chart:Axis Min="0" Max="500" MajorUnit="20" AutoMin="False"> <c1chart:Axis.Title> <TextBlock Text="Price" TextAlignment="Center" Foreground="Crimson" /> </c1chart:Axis.Title> </c1chart:Axis> </c1chart:ChartView.AxisX> <c1chart:ChartView.AxisY> <c1chart:Axis> <c1chart:Axis.Title> <TextBlock Text="Kitchen Electronics" TextAlignment="Center" Foreground="Crimson" /> </c1chart:Axis.Title> </c1chart:Axis> </c1chart:ChartView.AxisY> </c1chart:ChartView> </c1chart:C1Chart.View>

XAML

Copy Code

<c1chart:C1Chart.View>
                <c1chart:ChartView>
                    <c1chart:ChartView.AxisX>
                        <c1chart:Axis Min="0" Max="500" MajorUnit="20" AutoMin="False">
                            <c1chart:Axis.Title>
                                <TextBlock Text="Price" TextAlignment="Center" Foreground="Crimson" />
                            </c1chart:Axis.Title>
                        </c1chart:Axis>
                    </c1chart:ChartView.AxisX>
                    <c1chart:ChartView.AxisY>
                        <c1chart:Axis>
                            <c1chart:Axis.Title>
                                <TextBlock Text="Kitchen Electronics" TextAlignment="Center" Foreground="Crimson" />
                            </c1chart:Axis.Title>
                       </c1chart:Axis>
                    </c1chart:ChartView.AxisY>
                </c1chart:ChartView>
            </c1chart:C1Chart.View>

Within the <c1chart:Axis></c1chart:Axis> of the ChartView.AxisX object set the AnnoFormat to change the numeric x-values along the x-axis to currency and the AnnoAngle property to rotate the X-Axis annotation to 60 degrees counterclockwise.

XAML	Copy Code
<c1chart:Axis AnnoFormat="c" AnnoAngle="60" />

Within the <c1chart:Axis></c1chart:Axis> of the ChartView.AxisY object set the Reversed property to True to reverse the direction of the Y-Axis.

Add the following code in the Public MainPage() class to format the chart axes:

Visual Basic	Copy Code
' set axes titles C1Chart1.View.AxisY.Title = New TextBlock(New Run("Kitchen Electronics")) C1Chart1.View.AxisX.Title = New TextBlock(New Run("Price")) ' set axes bounds C1Chart1.View.AxisX.Min = 0 C1Chart1.View.AxisX.Max = 500 c1Chart1.View.AxisX.MajorUnit = 20 ' Financial formatting C1Chart1.View.AxisX.AnnoFormat = "c" ' axis annotation rotation C1Chart1.View.AxisX.AnnoAngle = "60"

Visual Basic

Copy Code

' set axes titles
   C1Chart1.View.AxisY.Title = New TextBlock(New Run("Kitchen Electronics"))
   C1Chart1.View.AxisX.Title = New TextBlock(New Run("Price"))

   ' set axes bounds
   C1Chart1.View.AxisX.Min = 0
   C1Chart1.View.AxisX.Max = 500
   c1Chart1.View.AxisX.MajorUnit = 20

   ' Financial formatting
   C1Chart1.View.AxisX.AnnoFormat = "c"

   ' axis annotation rotation
   C1Chart1.View.AxisX.AnnoAngle = "60"

C#	Copy Code
// set axes titles c1Chart1.View.AxisY.Title= new TextBlock() { Text = "Kitchen Electronics" }; c1Chart1.View.AxisX.Title = new TextBlock() { Text = "Price" }; // set axes bounds c1Chart1.View.AxisX.Min = 0; c1Chart1.View.AxisX.Max = 500; c1Chart1.View.AxisX.MajorUnit = 20; // financial formatting c1Chart1.View.AxisX.AnnoFormat = "c"; // axis annotation rotation c1Chart1.View.AxisX.AnnoAngle=60;

Copy Code

// set axes titles
   c1Chart1.View.AxisY.Title= new TextBlock() { Text = "Kitchen Electronics" };
   c1Chart1.View.AxisX.Title = new TextBlock() { Text = "Price" };

   // set axes bounds
   c1Chart1.View.AxisX.Min = 0;
   c1Chart1.View.AxisX.Max = 500;
   c1Chart1.View.AxisX.MajorUnit = 20;

   // financial formatting
   c1Chart1.View.AxisX.AnnoFormat = "c";

   // axis annotation rotation
   c1Chart1.View.AxisX.AnnoAngle=60;

In the next step, Step 4 of 4: Adjust the Chart’s Appearance, you’ll learn how to customize the chart’s appearance programmatically.